<!--log title -->
<template>
  <div style="display:flex;justify-content:space-between">
      <div style="display:flex;width:220px;height:64px;backgroundColor:#E6F7FF;padding:12px;border-radius:4px">
        <div style="width:40px;height:40px;backgroundColor:#BAE7FF;border-radius:4px;display:flex;justify-content:center;align-items:center">
          <i class="cuifont icon_comment_warning"></i>
        </div>
        <div style="height:40px;justify-content:space-between;display:flex;flex-direction:column;align-items: flex-start;margin-left:12px">
          <div style="height:14px;line-height:14px;font-size:14px;color:#808080">Sync Total</div>
          <div style="height:18px;line-height:22px;font-size:18px;color:#404040;font-weight:700">{{allCount.total}}</div>
        </div>
        <!-- {{this.$t('custom.connector.loginfo.lasttime')}} {{timeAreaFormat(titleInfo.lastTime?titleInfo.lastTime:0)}} -->
      </div>
      <div style="display:flex;width:220px;height:64px;backgroundColor:#F6FFED;padding:12px;border-radius:4px">
        <div style="width:40px;height:40px;backgroundColor:#D9F7BE;border-radius:4px;display:flex;justify-content:center;align-items:center">
          <i class="cuifont icon_comment_check"></i>
        </div>
        <div style="height:40px;justify-content:space-between;display:flex;flex-direction:column;align-items: flex-start;margin-left:12px">
          <div style="height:14px;line-height:14px;font-size:14px;color:#808080">Success Count</div>
          <div style="height:18px;line-height:22px;font-size:18px;color:#404040;font-weight:700">{{allCount.successcount}}</div>
        </div>
        <!-- {{this.$t('custom.connector.loginfo.sessionCount')}} {{sessionCount?sessionCount:0}} -->
      </div>
      <div style="display:flex;width:220px;height:64px;backgroundColor:#FFF1F0;padding:12px;border-radius:4px">
        <div style="width:40px;height:40px;backgroundColor:#FFCCC7;border-radius:4px;display:flex;justify-content:center;align-items:center">
          <i class="cuifont icon_comment_error"></i>
        </div>
        <div style="height:40px;justify-content:space-between;display:flex;flex-direction:column;align-items: flex-start;margin-left:12px">
          <div style="height:14px;line-height:14px;font-size:14px;color:#808080">Fail Count</div>
          <div style="height:18px;line-height:22px;font-size:18px;color:#404040;font-weight:700">{{allCount.total-allCount.successcount||null}}</div>
        </div>
        <!-- {{this.$t('custom.connector.loginfo.errorCount')}} {{errorCount?errorCount:0}} -->
      </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    subjectCode: String
  },
  data () {
    return {
      sessionCount: null,
      errorCount: null,
      allCount: {}
    }
  },
  created () {
    // this.getCountGrabLogStatus()
    this.datalistEventbus()
  },
  methods: {
    datalistEventbus () {
      this.$root.eventBus.$on('loglistBus', (val) => {
        this.allCount = val
      })
    },
    timeAreaFormat (time) {
      if (time) {
        return moment.tz(time, this.$store.state.user.timezoneId).format('MM/DD/YYYY HH:mm') + ' ' + moment.tz(time, this.$store.state.user.timezoneId).format('zz')
      } else {
        return time
      }
    }

    // getCountGrabLogStatus () {
    //   const params = {
    //     tenantId: this.$store.state.user.tenantCode,
    //     subjectCode: this.subjectCode
    //   }

    //   this.$interface.taskManager.getCountGrabLogStatus(params)
    //     .then(({ data: res }) => {
    //       if (res.code !== 0) {
    //         return this.$message.error(res.msg)
    //       }

    //       if (res.data) {
    //         res.data.forEach(e => {
    //           if (e.status === 200) {
    //             this.sessionCount = e.countStatus
    //           }
    //           if (e.status === 500) {
    //             this.errorCount = e.countStatus
    //           }
    //         })
    //       }
    //     })
    //     .catch(() => { })
    // }
  }
}
</script>

<style lang="scss">
.log_title{
  height: 40px;
  background: #E6F7FF;
  // border-radius: 4px;
  color: #138DC7;
  >div{
    line-height: 40px;
    background: #E6F7FF;
    .el-card__body{
      text-align: left;
      color: #138DC7;
      padding: 0 !important;
      padding-left: 20px !important;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
</style>
